<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<script src="assets/flexible/flexible.debug.js"></script>
	<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="format-detection" content="email=no">
	<title>首页</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="assets/swiper/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <style type="text/css">  
    .swiper-slide {   
    	width: 100%;   
        background: url(images/beijing1.png) no-repeat;
        background-size: cover;        
    }
    .deng{
    	width: 100%;   
        background: url(images/beijing2.png) no-repeat;
        background-size: cover;        
    }
    .inpt{
        background: url(images/ren.png) 2% no-repeat;   
    }
    .ipt{
    	background: url(images/suo.png) 2% no-repeat;  
    }
    .artle{
    	background: url(images/beijing3.png) no-repeat;
    	background-size: cover;
    }
    </style>
</head>
<body>
	
	<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
            	<div class="logos">
            		<img src="images/logu.png"/>
            	</div>
            	<div class="biaozhi">
            		<img src="images/biaozhi.png"/>
            	</div>
            	<div class="botms">
            		<p><img src="images/zhongyao.png"/></p>
            		<span><img src="images/youtu.png"/></span>
            	    <p class="gongsi"><img src="images/gongsi.png"/></p>
            	</div>
            </div>
            <div class="swiper-slide deng">
                 <div class="guanggao">
                 	<p><img src="images/logu.png"/></p>
                 	<span><img src="images/biaozhi.png"/></span>
                 </div>
                 <div class="shuru">
                 	<input type="text" class="inpt" placeholder=""/>
                 	<input type="password" class="inpt ipt" placeholder=""/>                   
                   <div class="shu-ru">
	                   <input type="checkbox" class="ipts"/>记住我
	               </div>
                 </div>
                 <div class="_denglu">
                 	<button class="an1">登录</button>
                 	<button class="an2">注册</button>
                 </div>                
            </div>          
        </div>
    </div>
    
    <article class="artle">
    	<div class="artle-top">
    		<p><img src="images/touxiang.png"/></p>
    		<div class="_name">
    			
    		</div>
    		<div class="history" id="his-dele">X</div>
    	</div>
    	<div class="artle-conter">
    		<dl class="gongcheng">
    			<dt><img src="images/gongju2.png"/></dt>
    			<dd>工程师日报</dd>
    		</dl>
    		<dl>
    			<dt><img src="images/gongju4.png"/></dt>
    			<dd>月度维护计划</dd>
    		</dl>
    		<dl>
    			<dt><img src="images/gongju1.png"/></dt>
    			<dd>抢修管理</dd>
    		</dl>
    		<dl>
    			<dt><img src="images/gongju5.png"/></dt>
    			<dd>信息中心</dd>
    		</dl>
    		<dl>
    			<dt><img src="images/gongju3.png"/></dt>
    			<dd>系统中心</dd>
    		</dl>
    	</div>
    	<footer class="fot-you">
	    	<dl>
	    		<dt><img src="images/shouji.png"/></dt>
	    		<dd>退出系统</dd>
	    	</dl>
	    </footer>
    </article>
    
    <div class="gongchengshi">
    	<div class="gongchengshi-top">
    		<span class="jianTou"><img src="images/jiantou.png"/></span>
    		<p>工程师日报查询</p>
    		<span class="jiahao">+</span>
    	</div>
    	<div class="gongchengshi-center">
    		<div class="cent-top">
    		   <label>日报时间</label>
               <input type="date"> 之 <input type="date">
    		</div>
    		<div class="cent-top">
    		   <label>医&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;院</label>
               <select name="">
               	<option value="">北京协和医院</option>
               </select>
    		</div>
    	</div>
    	<div class="gongchenshi-botm">
    		<input type="button" value="查询" class="pt"/>
    		<input type="button" value="重置" class="pt chzhi"/>
    	</div>
 	
    </div>
    
    
	  <script src="assets/swiper/js/swiper.min.js"></script>
	  <script src="assets/jquery/jquery-3.2.1.js"></script>
	  
	  <script>
    	var swiper = new Swiper('.swiper-container');
    	
    		var hisTime;//获取搜索时间数组
		 	var hisItem;//获取搜索内容数组
		 	var firstKey;//获取最早的1个搜索时间
		 	 
		 	function init (){ 
		 	 
			 	hisTime = [];//时间数组置空
			 	hisItem = [];//内容数组置空
			 	 
			 	for(var i = 0; i < localStorage.length; i++){//数据去重
				 	if(!isNaN(localStorage.key(i))){//判断数据是否合法
				 	    hisTime.push(localStorage.key(i));
				 	}
			 	}
			 	 
			 	if(hisTime.length > 0) {
				 	hisTime.sort();//排序
					 	for (var y = 0; y < hisTime.length; y++) {
					 	    localStorage.getItem(hisTime[y]).trim() && hisItem.push(localStorage.getItem(hisTime[y]));
					 	}
			 	}
			 	 
			 	$("._name").html("");//执行init(),每次清空之前添加的节点	
			 	for(var i = 0; i < hisItem.length; i++){		 	 
				 	$("._name").prepend('<div class="word-break">'+hisItem[i]+'</div>');
				 	if(hisItem[i] != ''){
				 	}
			 	}			 	 
		 	}
		 	 
		 	init();//调用
		 	 
		 	$(".an1").click(function(){
		 	var value = $(".inpt").val();
		 	var time = (new Date()).getTime();
		 	
		 	if(!value){
			 	alert("你未输入内容");
			 	return;
		 	}else{
		 		$(".inpt").val("");
		 	}
		 	//输入的内容localStorage有记录
		 	 
		 	if($.inArray(value,hisItem) >= 0){		 	 
			 	for(var j = 0; j < localStorage.length; j++){
				 	if(value == localStorage.getItem(localStorage.key(j))){
				 	   localStorage.removeItem(localStorage.key(j));
				 	}
			 	}
		 	    localStorage.setItem(time,value);		 	 
		 	}else{
		 	    localStorage.setItem(time,value);
		 	}
		 	init();
		 	
		 	$('.artle').show();
		 	$('.swiper-container').hide();
	 	 
		 	});
		 	 
    	//清除记录功能
		 	$("#his-dele").click(function(){
			 	var f = 0;
			 	for(;f<hisTime.length;f++){
			 	   localStorage.removeItem(hisTime[f]);
			 	}
			 	init();
		 	});
    	$(function(){
    		$('.gongcheng').click(function(){
    			$('.gongchengshi').show();
    			$('.artle').hide();
    		})
    		$('.jianTou').click(function(){
    			$('.artle').show();
    			$('.gongchengshi').hide();
    		})
    	})
    	 
    	
    	
    	
      </script>
</body>
</html>
